<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刘旻余的主页</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .all{
        width: 100%;
        max-width: 100vw;
        display: flex;
        height: 100vh;
        background-image:url(./index/bj.jpg);
        background-position: (300px,0px);
        background-repeat: no-repeat;
    }
    ul{/*左边导航栏*/
        width: 355px;
        min-width: 300px;
        height: 100vh;
        color: #FFF;
        background-color:#000;
        line-height: 50px;
        text-align: center;
        font-size: 22px;
        }
    li{
        height: 50px;
        cursor: pointer;
    }
    .content{
        width: 100%;
        height: 100vh;       
        position: relative;
        margin: auto;
    }
    .last{
        position: absolute;
        width: 1100px;
        height: 650px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 10vw;
        left: 20vw;
    }
    a{
        text-decoration: none;
        width: 300px;
        color: #000;
        font-size: 35px;
        z-index: 1;
    }
    .js1 ,.dom,.bom,.js2{/*阶段*/
        position: absolute;
        width: 70vw;
        height: 90vh;
        opacity: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        top: 0;
        left: 5vw;
    }
    /*可操作的类名*/
    .li-active{
        color: #000;
        background-color: #FFF;
    }
</style>
<body>
    <div class="all">
        <ul>
            <li>最近一次上交的作业</li>
            <li>js初级</li>
            <li>DOM</li> 
            <li>BOM</li>
            <li>js高阶</li>
        </ul>
        <div class="content">
            <div class="last"></div>
            <div class="js1">
                <a href="./9.18/作业.html">9.18数据类型</a>
                <a href="./9.20/作业.html">9.20运算符</a>
                <a href="./9.21/作业.html">9.21流程控制</a>
                <a href="./9.22/作业.html">9.22函数</a>
                <a href="./9.25/作业.html">9.25预编译</a>
                <a href="./9.26/作业.html">9.26数组</a>
                <a href="./9.27/作业.html">9.27遍历</a>
                <a href="./10.8/作业.html">10.8字符串</a>
                <a href="./10.10/作业.html">10.10系统对象</a>
                <a href="./10.12/测试.html">10.12js初级测试</a>
            </div>
            <div class="dom">
                <a href="./10.13/作业.html">10.13选项卡</a>
                <a href="./10.16/练习.html">10.16动态生成表格</a>
                <a href="./10.16/作业.html">10.16操作节点</a>
                <a href="./10.17/作业.html">10.17小米导航栏</a>
                <a href="./10.18/轮播图.html">10.18轮播图</a>
                <a href="./10.19/无缝轮播图(变src).html">10.19无缝轮播图</a>
                <a href="./10.20/分页渲染/index.html">10.20分页渲染</a>
                <a href="./10.23/抽取名单.html">10.23抽取名单</a>
            </div>
            <div class="bom">
                <a href="./10.25/触底加载/index.html">10.25触底加载</a>
                <a href="./10.26/放大镜特效/index.html">10.26放大镜</a>
                <a href="./10.27/天空之城/index.html">10.27天空之城首页布局</a>
                <a href="./10.30/动态渲染轮播图.html">10.30动态渲染轮播图</a>
            </div>
            <div class="js2">
                <a href="./1114/练习题目.html">11.14练习</a>
                <a href="./1117/练习/红绿灯.html">11.17红绿灯</a>
            </div>
        </div>
    </div>
    <script>
        let li=document.querySelectorAll('li')
        let con=document.querySelector('.content')
        let a=con.querySelectorAll('a')
        li[0].classList.add('li-active')
        li.forEach((e,i)=>{
            e.addEventListener('click',()=>{
                li.forEach((e,i1)=>{
                    if(i1!=i)e.classList.toggle('li-active',false)
                })
                for(let j=0;j<con.children.length;j++){
                    if(j!=i)con.children[j].style.opacity = '0';
                }
               con.children[i].style.opacity = '1';//显示对应作业
               e.classList.toggle('li-active',true)          
            })
        })
        let a1=document.createElement('a');
        a1.href =a[a.length-1].href
        a1.innerText=a[a.length-1].innerText
        console.log(a1);
        con.children[0].appendChild(a1)
    </script>
</body>
</html>